<template>
  <div class="orders">
    <div class="search-bar">
      <input type="text" v-model="searchText" placeholder="搜索订单编号或客户名称">
      <button @click="search">搜索</button>
    </div>
    <div class="filter-bar">
      <select v-model="status">
        <option value="">全部订单</option>
        <option v-for="option in statusOptions" :value="option.value">{{ option.label }}</option>
      </select>
      <button @click="filter">筛选</button>
    </div>
    <div class="order-list">
      <div class="order" v-for="order in displayedOrders" :key="order.id">
        <div class="order-number">{{ order.number }}</div>
        <div class="order-customer">{{ order.customer }}</div>
        <div class="order-status">{{ order.status }}</div>
      </div>
    </div>
    <div class="pagination">
      <ul>
        <li
          v-for="page in pageCount"
          :key="page"
          :class="{ active: currentPage === page }"
          @click="currentPage = page"
        >
          {{ page }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
// defineOptions({
//   name: "OrderList"
// });
export default {
  name: 'OrderList',
  data() {
    return {
      orders: [
        { id: 1, number: "2023001", customer: "ABC 公司", status: "已完成" },
        { id: 2, number: "2023002", customer: "XYZ 公司", status: "生产中" },
        { id: 3, number: "2023003", customer: "123 公司", status: "已取消" },
        { id: 4, number: "2023004", customer: "456 公司", status: "已完成" },
        { id: 5, number: "2023005", customer: "789 公司", status: "等待中" },
        { id: 6, number: "2023006", customer: "ABC 公司", status: "生产中" },
        { id: 7, number: "2023007", customer: "XYZ 公司", status: "已完成" },
        { id: 8, number: "2023008", customer: "123 公司", status: "已取消" },
        { id: 9, number: '2023009', customer: '456 公司', status: '等待中' },
        { id: 10, number: "2023010", customer: "789 公司", status: "生产中" },
        { id: 11, number: '2023011', customer: 'ABC 公司', status: '已完成' },
        { id: 12, number: '2023012', customer: 'XYZ 公司', status: '等待中' },
        { id: 13, number: '2023013', customer: '123 公司', status: '生产中' },
        { id: 14, number: '2023014', customer: '456 公司', status: '已完成' },
        { id: 15, number: '2023015', customer: '789 公司', status: '已取消' },
        { id: 16, number: '2023016', customer: 'ABC 公司', status: '生产中' },
        { id: 17, number: '2023017', customer: 'XYZ 公司', status: '已完成' },
        { id: 18, number: '2023018', customer: '123 公司', status: '等待中' },
        { id: 19, number: "2023019", customer: "456 公司", status: "已完成" },
        { id: 20, number: "2023020", customer: "789 公司", status: "生产中" },
        { id: 21, number: "2023020", customer: "789 公司", status: "生产中" },
        { id: 22, number: "2023020", customer: "789 公司", status: "生产中" }
      ],
      searchText: '',
      status: '',
      currentPage: 1,
      pageSize: 20,
    };
  },
  computed: {
    statusOptions() {
      // 这里可以根据实际需求修改筛选项
      return [
        { label: "全部订单", value: "" },
        { label: "生产中", value: "生产中" },
        { label: "已完成", value: "已完成" },
        { label: "已取消", value: "已取消" },
        { label: "等待中", value: "等待中" }
      ];
    },
    filteredOrders() {
      let filtered = this.orders;
      if (this.status) {
        filtered = filtered.filter(order => order.status === this.status);
      }
      if (this.searchText) {
        const searchTextLower = this.searchText.toLowerCase();
        filtered = filtered.filter(order =>
            order.number.toLowerCase().includes(searchTextLower) ||
            order.customer.toLowerCase().includes(searchTextLower)
        );
      }
      return filtered;
    },
    displayedOrders() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.filteredOrders.slice(start, end);
    },
    pageCount() {
      return Math.ceil(this.filteredOrders.length / this.pageSize);
    },
  },
  methods: {
    search() {
      this.currentPage = 1;
    },
    filter() {
      this.currentPage = 1;
    },
  },
};
</script>

<style scoped>
.order-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}

.order {
  width: calc(25% - 10px);
  margin-right: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  padding: 10px;
}

.order-number {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.order-customer {
  font-size: 14px;
  margin-bottom: 5px;
}

.order-status {
  font-size: 14px;
  font-weight: bold;
}

.pagination {
  margin-top: 20px;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  display: inline-block;
  margin-right: 10px;
  padding: 5px 10px;
  border-radius: 3px;
  background-color: #eee;
  color: #333;
  cursor: pointer;
}

li.active {
  background-color: #007bff;
  color: #fff;
}

.search-bar {
  margin-bottom: 10px;
}

.search-bar input {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-right: 10px;
}

.filter-bar {
  margin-bottom: 10px;
}

.filter-bar select {
  padding: 5px;
  border-radius: 3px;
  margin-right: 10px;
}
</style>
